<template>
  <div class="outer-container">
    <div class="main-container">
      <el-card class="form-card">
        <el-form>
          <el-form-item>
            <el-upload
              class="upload-demo"
              drag
              action="#"
              :show-file-list="true"
              :limit="1"
              accept=".json"
              :on-change="handleFileChange"
              :before-upload="beforeUpload"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传 1 个 JSON 文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item class="model-and-button-row">
            <div class="left-aligned">
              <el-select v-model="selectedModel" placeholder="请选择模型">
                <el-option
                  v-for="model in availableModels"
                  :key="model"
                  :label="model"
                  :value="model"
                  :disabled="testedModels.includes(model)"
                />
              </el-select>
            </div>
            <div class="right-aligned">
              <el-button type="primary" @click="testModel" :loading="isTesting">开始测试</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <div id="result-section" class="result-container" v-loading="isTesting">
        <!-- 展示结果 -->
        <el-card v-if="showResult" class="result-card">
          <template #header>
            <h3>摘要生成结果</h3>
          </template>
          <el-input v-model="searchQuery" placeholder="搜索原文、参考摘要或生成的摘要"></el-input>
          <div class="result-list" v-if="paginatedFilteredData.length > 0">
            <div class="result-item" v-for="item in paginatedFilteredData" :key="item.id">
              <h4>原文</h4>
              <div>
                <pre class="result-text" v-if="!item.isExpanded">{{ item.originalText.slice(0, 10) }}...</pre>
                <pre class="result-text" v-else>{{ item.originalText }}</pre>
                <el-button
                  size="small"
                  @click="toggleExpand(item)"
                >{{ item.isExpanded ? '收起' : '展开' }}</el-button>
              </div>
              <h4>参考摘要</h4>
              <pre class="result-text">{{ item.referenceSummary }}</pre>
              <h4>生成的摘要</h4>
              <pre class="result-text">{{ item.generatedSummary }}</pre>
            </div>
          </div>
          <div v-else class="no-result">未找到匹配结果</div>
          <div class="pagination-wrapper">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="filteredData.length"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 定义响应式数据
const selectedFile = ref(null);
const selectedModel = ref('');
const availableModels = ref(['BART_NLPCC', 'T5', 'PEGASUS']);
const testedModels = ref([]);
const isTesting = ref(false);
const showResult = ref(false);
const result = ref([]);
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);

// 处理文件变化
const handleFileChange = (file) => {
  selectedFile.value = file.raw;
};

// 上传前检查
const beforeUpload = (file) => {
  const isJson = file.type === 'application/json';
  if (!isJson) {
    ElMessage.error('只能上传 JSON 文件');
  }
  return isJson;
};

// 开始测试
const testModel = async () => {
  if (!selectedFile.value) {
    ElMessage.error('请上传 JSON 文件');
    return;
  }
  if (!selectedModel.value) {
    ElMessage.error('请选择模型');
    return;
  }

  isTesting.value = true;
  try {
    const formData = new FormData();
    formData.append('file', selectedFile.value);
    formData.append('model', selectedModel.value);

    const response = await axios.post('http://127.0.0.1:5000/summarizes', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });

    result.value = response.data.map(item => ({ ...item, isExpanded: false }));
    showResult.value = true;
    testedModels.value.push(selectedModel.value);
    ElMessage.success('测试成功');
  } catch (error) {
    ElMessage.error('测试失败，请稍后重试');
    console.error(error);
  } finally {
    isTesting.value = false;
  }
};

// 计算筛选后的数据
const filteredData = computed(() => {
  if (!searchQuery.value) {
    return result.value;
  }
  return result.value.filter(item => {
    return item.originalText.includes(searchQuery.value) ||
      item.referenceSummary.includes(searchQuery.value) ||
      item.generatedSummary.includes(searchQuery.value);
  });
});

// 计算当前页的数据
const paginatedFilteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredData.value.slice(start, end);
});

// 处理每页显示数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

// 切换原文展开状态
const toggleExpand = (item) => {
  item.isExpanded = !item.isExpanded;
};
</script>

<style scoped>
.outer-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 75vh;
  max-height: 75vh;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow-y: auto;
  margin: 10px auto;
  margin-top: 40px;
  width: 90%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.main-container {
  padding: 30px;
}

.form-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-radius: 8px;
}

.upload-demo {
  width: 100%;
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.el-upload__text {
  margin-top: 15px;
  font-size: 16px;
  color: #333;
}

.el-upload__tip {
  margin-top: 15px;
  font-size: 14px;
  color: #999;
}

.model-and-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left-aligned {
  flex: 1;
  margin-right: 20px;
}

.right-aligned {
  flex-shrink: 0;
}

.result-container {
  background-color: #f9f9f9;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.result-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.result-list {
  margin-top: 20px;
}

.result-item {
  border-bottom: 1px solid #e6e6e6;
  padding: 10px;
}

.result-item h4 {
  margin-bottom: 5px;
  color: #333;
  font-size: 16px;
}

.result-text {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.no-result {
  margin-top: 20px;
  color: #999;
  text-align: center;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-pagination {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-pagination button,
.el-pagination .el-pager li {
  margin: 0 5px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  color: #333;
  padding: 5px 10px;
  cursor: pointer;
}

.el-pagination button:hover,
.el-pagination .el-pager li:hover {
  background-color: #e9ecef;
}

.el-pagination .el-pager li.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}
</style>